<script setup>
import { ref, reactive, defineProps, defineExpose, onMounted } from 'vue';
import Detail from './Detail.vue';
// 属性
const props = defineProps(['onSelect', 'multi', 'multiButtonText', 'selectedMemberIds']);

//引用
const refDetail = ref(null);

// 数据
const search = reactive({
  keyword: ''
});
const rowsParams = ref({
  keyword: '',
  pageNo: 0,
  pageSize: 20
});
const rows = reactive({
  list: [],
  total: 0
});

// 方法
const getList = async () => {
  const data = await api.getMemberList(rowsParams.value);
  if (data.success) {
    if (rowsParams.value.pageNo === 0) {
      rows.total = data.result.total;
    }
    rows.list = _.map(data.result.list, o => {
      const f = _.includes(props.selectedMemberIds, o.id);
      o.selected = f;
      o.disabled = f;
      return o;
    });
  }
}
const refreshList = (onlyUpdate) => {
  if (onlyUpdate) {
    rows.list = [...rows.list];
  } else {
    const params = {
      keyword: search.keyword,
      pageNo: 0,
      pageSize: 20
    };
    if (!_.isEqual(rowsParams.value, params)) {
      rowsParams.value = params;
    } else {
      getList();
    }
  }
};
const removeMember = async (record) => {
  if (!(await $confirm(`你确定要删除该人员吗？`))) {
    return;
  }
  const data = await api.removeMember({
    id: record.id
  });
  if (!data.success) {
    return $alert(data.message);
  }
  refreshList();
  $success('删除成功');
}
const doSheach = () => {
  refreshList();
};

// 生命周期
onMounted(getList);
</script>

<template>
  <div class="pageContainer">
    <div class="topContainer">
      <div class="searchContainer">
        <el-input v-model.trim="search.keyword" @keydown.native.enter="doSheach" size="mini" placeholder="姓名|电话" clearable></el-input>
        <el-button size="mini" plain type="primary" style="margin-left: 10px" @click="search = { keyword: '' }">清空</el-button>
        <el-button size="mini" plain type="primary" @click="doSheach">搜索</el-button>
      </div>
      <div class="buttonContainer" v-if="!props.onSelect">
        <el-button size="mini" plain type="primary" @click="refDetail.showCreate()">添加人员</el-button>
        <el-button size="mini" plain type="primary" @click="exportExcel">导出Excel</el-button>
      </div>
      <div class="buttonContainer" v-if="!!props.onSelect && multi">
        <el-button size="mini" plain type="primary" @click="props.onSelect(rows.list)">{{ multiButtonText || '确定选择' }}</el-button>
      </div>
    </div>
    <div class="table" ref="table">
      <el-table :data="rows.list" style="width: 100%" border>
        <el-table-column label="头像" width="80" align="center">
          <template #default="scope">
            <div class="headContainer">
              <div v-if="scope.row.head" class="head" :style="{ 'background-image': `url(${scope.row.head})` }"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="name" min-width="160" align="center"></el-table-column>
        <el-table-column label="电话" prop="phone" min-width="160" align="center"></el-table-column>
        <!-- <el-table-column label="所在部门" prop="organizationName" min-width="59" align="center"></el-table-column> -->
        <el-table-column fixed="right" label="操作" min-width="160">
          <template #default="scope">
            <el-button v-if="!props.onSelect" @click="() => refDetail.showDetail(scope.row)" type="primary" size="mini">详情</el-button>
            <el-button v-if="!props.onSelect" @click="() => refDetail.showModify(scope.row)" type="primary" size="mini">修改</el-button>
            <el-button v-if="!props.onSelect" @click="removeMember(scope.row)" type="danger" size="mini">删除</el-button>
            <el-button v-if="!!props.onSelect && !multi" @click="props.onSelect(scope.row)" type="primary" size="mini">选择</el-button>
            <el-checkbox v-if="multi" label="选择" v-model="scope.row.selected" :disabled="scope.row.disabled"></el-checkbox>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-if="rows.total" small :page-size="rowsParams.pageSize" :total="rows.total" :current-page="rowsParams.pageNo + 1" layout="prev, pager, next,total" @current-change="pageNo => rowsParams.pageNo = pageNo" />
    </div>
    <Detail ref="refDetail" :refreshList="refreshList" />
  </div>
</template>

<style lang='less' scoped>
.pageContainer {
  padding: 20px;
  background: white;
  flex: 1;
}
.topContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 20px;
}
.searchContainer {
  display: flex;
  flex-direction: row;
  width: 400px;
}
.buttonContainer {
  display: flex;
  flex-direction: row;
}
.table {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  cursor: pointer;
}
.headContainer {
  width: 100%;
  display: flex;
  justify-content: center;
}
.head {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: white;
  border: 1px dashed #d9d9d9;
}
</style>
